<template>
	<div class="tooth-main">
		<el-popover
			placement="bottom"
			trigger="click"
			:show-arrow="false"
			:hide-after="1"
			@hide="hidePopover"
		>
		<template #reference>
			<div class="tooth-data" @click="showTooth()">
				<div class="tooth-data-left-top">
					<div style="display: inline-block" v-for="item in leftReserveMock" :key="item.id">
						<div v-if="item.super" style="display: inline-block">
							(
							<span v-if="item.isClick === 'left'" class="supernumerary">{{item.super}}</span>
							<span>{{item.id}}</span>
							<span v-if="item.isClick === 'right'" class="supernumerary">{{item.super}}</span>
							)
						</div>
						<div style="display: inline-block" v-else>
							<span v-if='item.isActive'>{{item.id}}</span>
						</div>
						<span class="sides" v-if="item.isActive">{{item.sub}}</span>
					</div>
					
				</div>
				<div class="tooth-data-right-top">
					<div style="display: inline-block" v-for="item in rightTopMockData" :key="item.id">
						<div v-if="item.super" style="display: inline-block">
							(
							<span v-if="item.isClick === 'left'" class="supernumerary">{{item.super}}</span>
							<span>{{item.id}}</span>
							<span v-if="item.isClick === 'right'" class="supernumerary">{{item.super}}</span>
							)
						</div>
						<div style="display: inline-block" v-else>
							<span v-if='item.isActive'>{{item.id}}</span>
						</div>
						<span v-if='item.isActive' class="sides">{{item.sub}}</span>
					</div>
				</div>
				<div class="tooth-data-left-bottom">
					<div style="display: inline-block" v-for="item in leftBottomReserveMock" :key="item.id">
						<div v-if="item.super" style="display: inline-block">
							(
							<span v-if="item.isClick === 'left'" class="supernumerary">{{item.super}}</span>
							<span>{{item.id}}</span>
							<span v-if="item.isClick === 'right'" class="supernumerary">{{item.super}}</span>
							)
						</div>
						<div style="display: inline-block" v-else>
							<span v-if='item.isActive'>{{item.id}}</span>
						</div>
						<span v-if='item.isActive' class="sides">{{item.sub}}</span>
					</div>
				</div>
				<div class="tooth-data-right-bottom">
					<div style="display: inline-block" v-for="item in rightMockData" :key="item.id">
						<div v-if="item.super" style="display: inline-block">
							(
							<span v-if="item.isClick === 'left'" class="supernumerary">{{item.super}}</span>
							<span>{{item.id}}</span>
							<span v-if="item.isClick === 'right'" class="supernumerary">{{item.super}}</span>
							)
						</div>
						<div style="display: inline-block" v-else>
							<span v-if='item.isActive'>{{item.id}}</span>
						</div>
						<span v-if='item.isActive' class="sides">{{item.sub}}</span>
					</div>
				</div>
			</div>
		</template>
			<div class="tooth" v-if="isOrdinaryTooth" >
				<header class="tooth-head">
					<div class="btns">
						<el-button class="btn-2" @click="clear">清空</el-button>
						<el-button class="btn-2" @click="fullMilk">全口-乳</el-button>
						<el-button class="btn-2" @click="upperHalfMilk">上半口-乳</el-button>
						<el-button class="btn-2" @click="lowerMilk">下半口-乳</el-button>
						<el-button class="btn-2" style="margin-left: 40px" @click="fullPermanent">全口-恒</el-button>
						<el-button class="btn-2" @click="upperPermanent">上半口-恒</el-button>
						<el-button class="btn-2" @click="lowerPermanent">下半口-恒</el-button>
					</div>
					<div class="close" @click="close()">
						<el-icon><close /></el-icon>
					</div>
				</header>
				<div class="content-main">
					<div class="content-ordinary">
						<div class="tooth-size tooth-ordinary-left-top">
							<div class="sum">
									<div class="sum-left">
											<div class="ordinary-btn ordinary-btn-top" 
														v-for="(item, index) in deciduousToothList" 
														:class="{'tooth-active': item.active}"
														:key="item.id"
														@click="handleItem(item, index, 'left-top',)"
														>{{item.id}}</div>
									</div>
									<div class="sum-right">
										<div class="ordinary-btn ordinary-btn-bottom" 
													v-for="(item, index) in permanentToothList" 
													:class="{'tooth-active': item.active}"
													:key="item.id"
													@click="handleItem(item, index, 'left-top')"
													>{{item.id}}</div>
									</div>
							</div>
						</div>
						<div class="tooth-size tooth-ordinary-right-top">
							<div class="sum">
									<div class="sum-left">
											<div class="ordinary-btn ordinary-btn-top" 
													v-for="(item, index) in CopyDeciduousRight" 
													:class="{'tooth-active': item.active}"
													:key="item.id"
													@click="handleItem(item, index, 'right-top')"
													>{{item.id}}</div>
									</div>
									<div class="sum-right">
										<div class="ordinary-btn ordinary-btn-bottom" 
													v-for="(item, index) in CopyPermanentRight" 
													:class="{'tooth-active': item.active}"
													:key="item.id"
													@click="handleItem(item, index, 'right-top')"
													>{{item.id}}</div>
									</div>
							</div>
						</div>
						<div class="tooth-size tooth-ordinary-left-bottom">
							<div class="sum">
									<div class="sum-left">
											<div class="ordinary-btn ordinary-btn-top" 
													v-for="(item, index) in CopyPermanentLeft" 
													:class="{'tooth-active': item.active}"
													:key="item.id"
													@click="handleItem(item, index, 'left-bottom')"
													>{{item.id}}</div>
									</div>
									<div class="sum-right">
										<div class="ordinary-btn ordinary-btn-bottom" 
												v-for="(item, index) in CopyDeciduousLeft" 
												:class="{'tooth-active': item.active}"
												:key="item.id"
												@click="handleItem(item, index, 'left-bottom')"
												>{{item.id}}</div>
									</div>
							</div>
						</div>
						<div class="tooth-size tooth-ordinary-right-bottom">
							<div class="sum">
									<div class="sum-left">
											<div class="ordinary-btn ordinary-btn-top" 
														v-for="(item, index) in CopyPermanentRightBottom" 
														:class="{'tooth-active': item.active}"
														:key="item.id"
														@click="handleItem(item, index, 'right-bottom')"
														>
														{{item.id}}
											</div>
									</div>
									<div class="sum-right">
										<div class="ordinary-btn ordinary-btn-bottom" 
												v-for="(item, index) in CopyDeciduousRightBottom" 
												:class="{'tooth-active': item.active}"
												:key="item.id"
												@click="handleItem(item, index, 'right-bottom')"
												>
												{{item.id}}
												</div>
									</div>
							</div>
						</div>
					</div>
					<div class="content-right">
						<div class="content-right-main">
								<div class="main-top">
									<div class="main-top-title" v-if="isDisable">暂时选择牙位</div>
									<div class="main-top-title" v-else>
										<div class="div-ctx">
											<div class="left-b">{{leftB}}</div>
											<div class="right-b">{{rightB}}</div>
											<div class="left-t">{{leftT}}</div>
											<div class="right-t">{{rightT}}</div>
										</div>
										
									</div>
									<div class="main-top-ctx">
										<div class="top">
											<el-tooltip class="item" effect="dark" :content="i.content" placement="top" v-for="i in topList" :key="i">
												<div class="btns" :class="{'disable': isDisable, 'tooth-active': i.active}" @click="handleClick(i, $event)">{{i.id}}</div>
											</el-tooltip>
										</div>
										<div class="maddle">
											<el-tooltip class="item" effect="dark" :content="i.content" placement="top" v-for="i in maddleList" :key="i">
												<div class="btns" :class="{'disable': isDisable, 'tooth-active': i.active}" @click="handleClick(i, $event)">{{i.id}}</div>
											</el-tooltip>
										</div>
										<div class="bottom">
											<el-tooltip class="item" effect="dark" :content="i.content" placement="top" v-for="i in bottomList" :key="i">
												<div class="btns" :class="{'disable': isDisable, 'tooth-active': i.active}" @click="handleClick(i, $event)">{{i.id}}</div>
											</el-tooltip>
										</div>
									</div>
								</div>
								<div class="main-bottom">
									<div class="main-bottom-name">多生牙:</div>
									<div class="main-btn left-btn" 
												:class="{'disable': isDisable, 'tooth-active': i.active}" 
												v-for="i in speList" :key="i.id"
												@click="handleClick( i, $event)">{{i.id}}</div>
								</div>
						</div>
					</div>
				</div>
			</div>
		</el-popover>
	</div>
</template>

<script lang="ts">
import { Close } from '@element-plus/icons-vue'
import { defineComponent, ref, reactive, computed, PropType, watch } from "@vue/runtime-core";

type ToothType = {
	id: string,
	url?: string,
	active: boolean
}
type MockType = {
	id: number | string,
	sub: string,
	super: string,
	isClick: string,
	isActive: boolean,
	// index: number,
}
export default defineComponent({
	components: {
		Close
	},
	props: {
			lTToolist: {
				type: Array as PropType<MockType[]>
			},
			rTToolist: {
				type: Array as PropType<MockType[]>
			},
			lBToolist: {
				type: Array as PropType<MockType[]>
			},
			rBToolist: {
				type: Array as PropType<MockType[]>
			},


	},

	emits: ['getLeftData', 'getRightData' ,'getLeftBottomData', 'getRightBottomData'],
  setup(props, ctx) {
		// 总牙齿数据 列表展示
		const totalData:ToothType[] = reactive([
			{
				id: 'A',
				active: false,
			},
			{
				id: '1',
				active: false,
			},
			{
				id: 'B',
				active: false,
			},
			{
				id: '2',
				active: false,
			},
			{
				id: 'C',
				active: false,
			},
			{
				id: '3',
				active: false,
			},
			{
				id: 'D',
				active: false,
			},
			{
				id: '4',
				active: false,
			},
			{
				id: 'E',
				active: false,
			},
			{
				id: '5',
				active: false,
			},
			{
				id: '6',
				active: false,
			},
			{
				id: '7',
				active: false,
			},
			{
				id: '8',
				active: false,
			},
		])
		// 数字
    let permanentToothList:ToothType[] = reactive([])
		// 字母
    let deciduousToothList:ToothType[] = reactive([])
		
		totalData.forEach(i => {
			if(i.id.charCodeAt(0) >= 65) {
				deciduousToothList.push(i)
			}
			if(i.id.charCodeAt(0) < 65) {
				permanentToothList.push(i)
			}
		})
		

		const CopyPermanentRight:ToothType[] = JSON.parse(JSON.stringify(permanentToothList))
		const CopyPermanentRightBottom:ToothType[] = JSON.parse(JSON.stringify(permanentToothList))
		
		const CopyDeciduousRight:ToothType[] = JSON.parse(JSON.stringify(deciduousToothList))
		const CopyDeciduousRightBottom:ToothType[] = JSON.parse(JSON.stringify(deciduousToothList))
		
		permanentToothList = permanentToothList.reverse()
		deciduousToothList = deciduousToothList.reverse()
		const CopyPermanentLeft:ToothType[] = JSON.parse(JSON.stringify(permanentToothList))
		const CopyDeciduousLeft:ToothType[] = JSON.parse(JSON.stringify(deciduousToothList))



		const leftMockData = reactive(props.lTToolist as MockType[])
		const rightTopMockData = reactive(props.rTToolist as MockType[])
		const leftBottomMockData = reactive(props.lBToolist as MockType[])
		const rightMockData = reactive(props.rBToolist as MockType[])

		let leftReserveMock = computed(() => {
			return leftMockData.reverse()
		})
		let leftBottomReserveMock = computed(() => {
			return leftBottomMockData.reverse()
		})

		watch(() => props.lTToolist, (newt, prevt) => {
			// console.log(props.lTToolist,'执行了我是牙齿组件左边数据', newt)
			leftMockData.forEach(item => {
				deciduousToothList.forEach(d => {
					if(item.id === d.id) {
						d.active = item.isActive
					}
				})
				permanentToothList.forEach(p => {
					if(p.id === item.id) {
						p.active = item.isActive
					}
				})
				
			})
		}, {immediate: true})
		watch(() => props.rTToolist, (newt, prevt) => {
			rightTopMockData.forEach(item => {
				CopyDeciduousRight.forEach(d => {
					if(item.id === d.id) {
						d.active = item.isActive
					}
				})
				CopyPermanentRight.forEach(p => {
					if(p.id === item.id) {
						p.active = item.isActive
					}
				})
				
			})
			// console.log(props.rTToolist,'执行了我是牙齿组件---右边', newt)
		}, {immediate: true})
		watch(() => props.lBToolist, (newt, prevt) => {
			leftBottomMockData.forEach(item => {
				CopyDeciduousLeft.forEach(d => {
					if(item.id === d.id) {
						d.active = item.isActive
					}
				})
				CopyPermanentLeft.forEach(p => {
					if(p.id === item.id) {
						p.active = item.isActive
					}
				})
				
			})
			// console.log(props.lBToolist,'执行了我是牙齿组件---左下', newt)
		}, {immediate: true})
		watch(() => props.rBToolist, (newt, prevt) => {
			rightMockData.forEach(item => {
				CopyDeciduousRightBottom.forEach(d => {
					if(item.id === d.id) {
						d.active = item.isActive
					}
				})
				CopyPermanentRightBottom.forEach(p => {
					if(p.id === item.id) {
						p.active = item.isActive
					}
				})
				
			})
			// console.log(props.rBToolist,'执行了我是牙齿组件----右下', newt)
		}, {immediate: true})

    const leftTop = ref('')
		const rightTop = ref('')
		const leftBottom = ref('')
		const rightBottom = ref('')

    const leftB = ref()
    const rightB = ref()
    const leftT = ref()
    const rightT = ref()

    const isActive = ref(false)
    const isTooth = ref(true)
    const isToothShow = ref(false)
    const isOrdinaryTooth = ref(false)
    const isDisable = ref(true)
		const isClick = ref()

		

		

    const showTooth = () => {
				isOrdinaryTooth.value = true
		
		}

    const close = () => {
				isOrdinaryTooth.value = false
				
		}

		const setleftMockData = () => {
			return leftMockData.forEach(i => i.isActive = false)
		}
		const setrightTMockData = () => {
			return rightTopMockData.forEach(i => i.isActive = false)
		}
		const setleftTMockData = () => {
			return leftBottomMockData.forEach(i => i.isActive = false)
		}
		const setrightMockData = () => {
			return rightMockData.forEach(i => i.isActive = false)
		}

    const clear = () => {
			setleftMockData()
			setrightTMockData()
			setleftTMockData()
			setrightMockData()
			
			permanentToothList.forEach(item => item.active = false)
			CopyPermanentRight.forEach(item => item.active = false)
			CopyPermanentRightBottom.forEach(item => item.active = false)
			CopyPermanentLeft.forEach(item => item.active = false)

			deciduousToothList.forEach(item => item.active = false)
			CopyDeciduousRight.forEach(item => item.active = false)
			CopyDeciduousRightBottom.forEach(item => item.active = false)
			CopyDeciduousLeft.forEach(item => item.active = false)

			topList.forEach(i => i.active = false)
      maddleList.forEach(i => i.active = false)
      bottomList.forEach(i => i.active = false)
			speList.forEach(i => i.active = false)
    }

		// 判断 是颌面还是切缘
		const setJudgeType = (item: ToothType) => {
			// 选中了牙位
			// 切缘
			let data = ['A', 'B', 'C', '1', '2', '3'];
			// 是否是切缘
			let isMaxill = data.includes(item.id) || false;
			console.log(isDisable.value, item.active, isMaxill)
			if(isMaxill) {
					maddleList[1].content = '切缘'
					maddleList[1].id = 'I'
				} else {
					maddleList[1].content = '颌面'
					maddleList[1].id = 'O'
				}

			if(!item.active) {
				maddleList[1].content = '颌面/切缘'
				maddleList[1].id = 'O/I'
			}
		}

		// 设置右边小牙位展示
		const setMiniPosition = (position: string, val: string) => {
			console.log('setMiniPosition', position, val)
			leftB.value = ''
			rightB.value = ''
			leftT.value = ''
			rightT.value = ''
			switch(position) {
				case 'left-top':
					leftB.value = val
					break;
				case 'right-top':
					rightB.value = val
					break;
				case 'left-bottom':
					leftT.value = val
					break;
				case 'right-bottom':
					rightT.value = val
					break;
			}
		}

		// 设置选中的值
		const setIsActive = (arr: MockType[], val: string, show: boolean) => {
			let res = arr.find(i => val === i.id)
					if(res) {	
						res.isActive = show
					}
		}
		// 重置选中的值
		const resetActiveData = (arr: MockType[], val: string) => {
			arr.forEach(i => {
				if(i.id === val) {
					i.isActive = false
				}
				i.super = ''
				i.sub = ''
				i.isClick = ''
			})
		}

    const handleItem = (item:ToothType, index: number, position?: string) => {
			console.log('点了一项', item)
			item.active = !item.active
			setJudgeType(item)
			switch (position) {
				case 'left-top':
					if(item.active) {
						leftB.value = item.id
						setMiniPosition(position, item.id)
						setIsActive(leftMockData, item.id, true)
						isDisable.value = false
					} else {
						isDisable.value = true
						resetActiveData(leftMockData, item.id)
					}
					
					break;
				case 'right-top':
					if(item.active) {
						rightB.value = item.id
						isDisable.value = false
						setMiniPosition(position, item.id)
						setIsActive(rightTopMockData, item.id, true)
					} else {
						isDisable.value = true
						resetActiveData(rightTopMockData, item.id)
					}
					break;
				case 'left-bottom':
					if(item.active) {
						leftT.value = item.id
						isDisable.value = false
						setMiniPosition(position, item.id)
						setIsActive(leftBottomMockData, item.id, true)
					} else {
						isDisable.value = true
						resetActiveData(leftBottomMockData, item.id)
					}
					break;
				case 'right-bottom':
					if(item.active) {
						rightT.value = item.id
						isDisable.value = false
						setMiniPosition(position, item.id)
						setIsActive(rightMockData, item.id, true)
					} else {
						isDisable.value = true
						resetActiveData(rightMockData, item.id)
					}
					break;
				default:
					break;
			}

			topList.forEach(i => i.active = false)
			maddleList.forEach(i => i.active = false)
			bottomList.forEach(i => i.active = false)
			speList.forEach(i => i.active = false)
			
		}


    // 全口-乳
		const fullMilk = () => {
      isDisable.value = true

			deciduousToothList.forEach(i => { 
				i.active = true
				leftMockData.forEach(item => {
						if(item.id === i.id) {
							item.isActive = true
						}
					})
			})
			CopyDeciduousRight.forEach(i => { 
				i.active = true
				rightTopMockData.forEach(item => {
						if(item.id === i.id) {
							item.isActive = true
						}
					})
			})
			CopyDeciduousRightBottom.forEach(i => { 
				i.active = true 
				leftBottomMockData.forEach(item => {
						if(item.id === i.id) {
							item.isActive = true
						}
					})
			})
			CopyDeciduousLeft.forEach(i => { 
				i.active = true 
				rightMockData.forEach(item => {
						if(item.id === i.id) {
							item.isActive = true
						}
					})
			})
		}

    // 上半口-乳
		const upperHalfMilk = () => {

      isDisable.value = true

			deciduousToothList.forEach(i => { 
				i.active = true
				leftMockData.forEach(item => {
						if(item.id === i.id) {
							item.isActive = true
						}
					})
			})
			CopyDeciduousRight.forEach(i => { 
				i.active = true
				rightTopMockData.forEach(item => {
						if(item.id === i.id) {
							item.isActive = true
						}
					})
			})
		}

    // 下半口-乳
		const lowerMilk = () => {
      isDisable.value = true

			CopyDeciduousRightBottom.forEach(i => { 
				i.active = true 
				leftBottomMockData.forEach(item => {
						if(item.id === i.id) {
							item.isActive = true
						}
					})
			})
			CopyDeciduousLeft.forEach(i => { 
				i.active = true 
				rightMockData.forEach(item => {
						if(item.id === i.id) {
							item.isActive = true
						}
					})
			})
		}
		// 全口-恒
		const fullPermanent = () => {
      isDisable.value = true

			permanentToothList.forEach(i => { 
				i.active = true
				leftMockData.forEach(item => {
						if(item.id === i.id) {
							item.isActive = true
						}
					})
			})
			CopyPermanentRight.forEach(i => { 
				i.active = true
				rightTopMockData.forEach(item => {
						if(item.id === i.id) {
							item.isActive = true
						}
					})
			})
			CopyPermanentRightBottom.forEach(i => { 
				i.active = true 
				leftBottomMockData.forEach(item => {
						if(item.id === i.id) {
							item.isActive = true
						}
					})
			})
			CopyPermanentLeft.forEach(i => { 
				i.active = true 
				rightMockData.forEach(item => {
						if(item.id === i.id) {
							item.isActive = true
						}
					})
			})

		}
		// 上半口-恒
		const upperPermanent = () => {
			
      isDisable.value = true

			permanentToothList.forEach(i => { 
				i.active = true
				leftMockData.forEach(item => {
						if(item.id === i.id) {
							item.isActive = true
						}
					})
			})
			CopyPermanentRight.forEach(i => { 
				i.active = true
				rightTopMockData.forEach(item => {
						if(item.id === i.id) {
							item.isActive = true
						}
					})
			})
		}

		// 下半口-恒
		const lowerPermanent = () => {
      isDisable.value = true

			CopyPermanentRightBottom.forEach(i => { 
				i.active = true 
				leftBottomMockData.forEach(item => {
						if(item.id === i.id) {
							item.isActive = true
						}
					})
			})
			CopyPermanentLeft.forEach(i => { 
				i.active = true 
				rightMockData.forEach(item => {
						if(item.id === i.id) {
							item.isActive = true
						}
					})
			})
		}

    const topList = reactive([
      {
        id: 'La',
        content: '唇面',
        active: false
      },
      {
        id: 'B',
        content: '颊面',
        active: false
      },
      {
        id: 'F',
        content: '唇面颊面',
        active: false
      }
    ])

    const maddleList = reactive([
      {
        id: 'M',
        content: '近中面',
        active: false
      },
      {
        id: 'O/I',
        content: '颌面/切缘',
        active: false
      },
      {
        id: 'D',
        content: '远中面',
        active: false
      }
    ])

    const bottomList = reactive([
      {
        id: 'L',
        content: '舌侧',
        active: false
      },
      {
        id: 'P',
        content: '腭侧',
        active: false
      }
      
    ])

    const speList = reactive([
      {
        id: 'I',
        content: 'left',
        active: false
      },
      {
        id: 'I',
        content: 'right',
        active: false
      }
    ])

		// 小方块单机
		const setItemActiveData = (arrData: MockType[], item: any, val: string) => {
			arrData.forEach(i => {
            if(i.id === val) {
              if(item.content === 'left') {
								i.super = 's'
								i.isClick = 'left'
                speList.forEach(s => {
                  if(s.content === 'right') {
                    s.active = false
                  }
                })
              } else if (item.content === 'right') {
								i.super = 's'
								i.isClick = 'right'
                speList.forEach(s => {
                  if(s.content === 'left') {
                    s.active = false
                  }
                })
              } else {
                i.sub += item.id + ','
              }
            }
            
          })
		}

		const resetItemActiveData = (arrData: MockType[], item: any ,val: string) => {
			console.log(item)
			arrData.forEach(i => {
							if(i.id === val) {
								speList.forEach(s => {
									console.log(s)
									if(!s.active) {
										i.sub = ''
										i.super = ''
										i.isClick = ''
									}
								})
								
								
								topList.forEach(t => {
									if(t.active) {
										i.sub += t.id + ','
									}
								})

								maddleList.forEach(m => {
									if(m.active) {
										i.sub += m.id + ','
									}
								})

								bottomList.forEach(b => {
									if(b.active) {
										i.sub += b.id + ','
									}
								})

							}

						})
		}

    const handleClick = (item: any, e:Event) => {
			console.log('右侧小方块', item)
      if(!isDisable.value) {
        item.active = !item.active
        if(item.active) {
					setItemActiveData(leftMockData, item, leftB.value)
					setItemActiveData(rightTopMockData, item, rightB.value)
					setItemActiveData(leftBottomMockData, item, leftT.value)
					setItemActiveData(rightMockData, item, rightT.value)

					console.log(leftMockData)
				} else {
					console.log('false点击')
					resetItemActiveData(leftMockData, item, leftB.value)
					resetItemActiveData(rightTopMockData, item, rightB.value)
					resetItemActiveData(leftBottomMockData, item, leftT.value)
					resetItemActiveData(rightMockData, item, rightT.value)

				}
        
      } else {
        e.preventDefault();
      }
      
    }

		const hidePopover = () => {
			console.log(leftReserveMock.value)
			console.log(leftBottomReserveMock.value)
			let leftMockData1 = JSON.parse(JSON.stringify(leftReserveMock.value))
				let rightMockData1 = JSON.parse(JSON.stringify(rightTopMockData))
				let leftBottomMockData1 = JSON.parse(JSON.stringify(leftBottomReserveMock.value))
				let rightBottomMockData1 = JSON.parse(JSON.stringify(rightMockData))
				ctx.emit('getLeftData', leftMockData1)
				ctx.emit('getRightData', rightMockData1)
				ctx.emit('getLeftBottomData', leftBottomMockData1)
				ctx.emit('getRightBottomData', rightBottomMockData1)
		}
    return {
      leftTop,
      rightTop,
      leftBottom,
      rightBottom,

      leftB,
      rightB,
      leftT,
      rightT,

      leftMockData,
			rightTopMockData,
			leftBottomMockData,
			rightMockData,

			totalData,
			leftReserveMock,
			leftBottomReserveMock,

      permanentToothList,
      CopyPermanentRight,
      CopyPermanentRightBottom,
      CopyPermanentLeft,

      deciduousToothList,
      CopyDeciduousRight,
      CopyDeciduousRightBottom,
      CopyDeciduousLeft,

      isActive,
      isTooth,
      isToothShow,
      isOrdinaryTooth,
      isDisable,
			isClick,

      topList,
      handleClick,
      
      maddleList,
      bottomList,
      speList,

      showTooth,
      handleItem,
      close,
      clear,
      fullMilk,
      upperHalfMilk,
      lowerMilk,
      fullPermanent,
      upperPermanent,
      lowerPermanent,

			hidePopover,

    }
  }
})
</script>

<style lang="scss" scoped>
.tooth {
	width: 800px;
	height: 300px;
	box-shadow: 0 0 1px #000;
	background: white;
	box-sizing: border-box;
	// position: absolute;
	// top: 80px;
	// left: 0;
	// z-index: 99;
	.tooth-head {
		height: 45px;
		line-height: 45px;
		display: flex;
		justify-content: space-between;
		.btns {
			padding-left: 20px;
		}
		.close {
			padding-right: 20px;
			cursor: pointer;
		}
	}

	.content-main {
		background: white;
		width: 100%;
		height: calc(100% - 45px);
		display: flex;
		
		.content-ordinary {
			flex: 6;
			display: flex;
			flex-wrap: wrap;
			.tooth-size {
				width: 50%;
				height: 50%;
				box-sizing: border-box;
			}
			.tooth-ordinary-left-top {
				border-right: 1px solid #9397a2;
				border-bottom: 1px solid #9397a2;
				display: flex;
				
				.sum {
					width: 100%;
					height: 100%;
					display: flex;
					flex-direction: column;
					.sum-left {
						padding-left: 90px;
						margin: 20px;
						display: flex;
						justify-content: space-around;
						box-sizing: border-box;
					}
					.sum-right {
						display: flex;
						justify-content: space-around;
						margin: 20px;
						margin-top: 0;
					}
				}
				.ordinary-btn-top {
					
				}
				.ordinary-btn-bottom {

				}
			}
			.tooth-ordinary-left-bottom {
				border-right: 1px solid #9397a2;
				box-sizing: border-box;
				.sum {
					width: 100%;
					height: 100%;
					display: flex;
					flex-direction: column;
					.sum-left {
						
						margin: 20px;
						display: flex;
						justify-content: space-around;
						box-sizing: border-box;
					}
					.sum-right {
						padding-left: 90px;
						display: flex;
						justify-content: space-around;
						margin: 20px;
						margin-top: 0;
					}
				}
			}
			.tooth-ordinary-right-top {
				border-bottom: 1px solid #9397a2;
				box-sizing: border-box;
				.sum {
					width: 100%;
					height: 100%;
					display: flex;
					flex-direction: column;
					.sum-left {
						padding-right: 90px;
						margin: 20px;
						display: flex;
						justify-content: space-around;
						box-sizing: border-box;
					}
					.sum-right {
						display: flex;
						justify-content: space-around;
						margin: 20px;
						margin-top: 0;
					}
				}
			}
			.tooth-ordinary-right-bottom {
				.sum {
					width: 100%;
					height: 100%;
					display: flex;
					flex-direction: column;
					.sum-left {
						
						margin: 20px;
						display: flex;
						justify-content: space-around;
						box-sizing: border-box;
					}
					.sum-right {
						display: flex;
						justify-content: space-around;
						margin: 20px;
						margin-top: 0;
						padding-right: 90px;
					}
				}
			}
		}
		.content-right {
			
			flex: 2;
			
			.content-right-main {
				width: 150px;
				height: 200px;
				
				margin-top: 30px;
				display: flex;
				flex-direction: column;
				.main-top {
					flex: 4;
					background: #e6e6e6;
					.main-top-title {
						text-align: center;
						height: 30px;
						line-height: 30px;
						box-sizing: border-box;
						border-bottom: 1px solid #d8d8d8;
						font-size: 12px;
						color: #666a73;
            .div-ctx {
              display: flex;
              width: 30px;
              flex-wrap: wrap;
              margin: auto;
                .left-b {
                  width: 15px;
                  height: 15px;
                  line-height: 15px;
                  border-right: 1px solid #000;
                  border-bottom: 1px solid #000;
                  box-sizing: border-box;
                }
                .right-b {
                  width: 15px;
                  height: 15px;
                  line-height: 15px;
                  border-bottom: 1px solid #000;
                  box-sizing: border-box;
                }
              
              .left-t {
                width: 15px;
                height: 15px;
                line-height: 15px;
                border-right: 1px solid #000;
                box-sizing: border-box;
              }
              .right-t {
                width: 15px;
                height: 15px;
                line-height: 15px;
                box-sizing: border-box;
              }
            }
					}
					.main-top-ctx {
						.btns {
							width: 30px;
							height: 30px;
							text-align: center;
							line-height: 30px;
							box-sizing: border-box;
							background: white;
							font-size: 12px;
              cursor: pointer;
						}
						.btns:hover {
							background: $a1-Color;
						}
						.top {
							display: flex;
							padding: 10px 10px 0 10px;
							justify-content: space-evenly;
							box-sizing: border-box;
              position: relative;
						}
						.maddle {
							display: flex;
							padding: 10px 10px 0 10px;
							justify-content: space-evenly;
							box-sizing: border-box;
						}
						.bottom {
							display: flex;
							padding: 10px 10px 0 10px;
							justify-content: space-evenly;
							box-sizing: border-box;
						}
					}
				}
				.main-bottom {
					flex: 1;
					display: flex;
					justify-content: space-around;
					align-content: center;
					padding-top: 6px;
					.main-bottom-name {
						line-height: 2;
						font-size: 14px;
						color: #575D6A;
					}
					.main-btn {
						width: 30px;
						height: 30px;
						line-height: 30px;
						text-align: center;
						box-sizing: border-box;
						border: 1px solid #e9edf1;;
						font-size: 12px;
					}
          .left-btn {
              position: relative;
            }
            .left-btn:hover {
              background: $a1-Color;
            }
            .left-btn::before {
              position: absolute;
              content: 's';
              top: -10px;
              left: 4px;
            }
          .main-btn:nth-child(1) {
            
          }
					
          .main-btn:nth-child(3) {
            position: relative;
          }
          .main-btn:nth-child(3):hover {
            background: $a1-Color;
          }
          .main-btn:nth-child(3)::before {
            position: absolute;
						content: 's';
						top: -10px;
						left: 16px;
          }

					.right-btn {
						position: relative;
					}
					.right-btn:hover {
						background: $a1-Color;
					}
					.right-btn::before {
						position: absolute;
						content: 's';
						top: -10px;
						left: 16px;
					}
					
				}
			}
		}
		.ordinary-btn {
			display: inline-block;
			width: 30px;
			height: 30px;
			border: 1px solid #e9edf1;;
			box-sizing: border-box;
			text-align: center;
			line-height: 30px;
			color: #575d6a;
			cursor: pointer;
		}
		.ordinary-btn:hover {
			background: $a1-Color;
		}
	}
}

// 牙齿数据
.tooth-data {
	min-width: 220px;
	min-height: 60px;
	background: white;
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
	padding-right: 20px;
	.tooth-data-left-top {
		border-right: 1px solid #000;
		border-bottom: 1px solid #000;
		box-sizing: border-box;
		width: 50%;
		// height: 50%;
		text-align: right;
    // unicode-bidi: bidi-override;
		// direction: rtl;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.tooth-data-right-top {
		border-bottom: 1px solid #000;
		box-sizing: border-box;
		width: 50%;
		// height: 50%;
		text-align: left;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.tooth-data-right-bottom {
		
		box-sizing: border-box;
		width: 50%;
		// height: 50%;
		text-align: left;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.tooth-data-left-bottom {
		width: 50%;
		// height: 50%;
		text-align: right;
		border-right: 1px solid #000;
		box-sizing: border-box;
		// unicode-bidi: bidi-override;
		// direction: rtl;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}


.tooth-active {
	background: $mainColor !important;
}
.active {
	background: $mainColor;
	color: white;
}

.disable {
  cursor: not-allowed !important;
}

.sides {
  font-size: $fontSize;
  transform: scale(0.6);
  position: relative;
  top: -5px;
}

.supernumerary {
	font-size: $fontSize;
	transform: scale(.6);
	position: relative;
	top: -5px;
}

</style>